<!-- 工具(蜂鸟) -->
<template>
  <div class="tools-fmap">
    <div class="btn-group-tools">
        <!-- 平台管理 -->
        <el-tooltip v-if="bsConfig.PlatManage.show" class="item" effect="dark" content="平台管理">
            <el-button type="primary" icon="iconfont fontSize30 iconfuwuqi-fill" circle @click="$Ctl.enterDetail('PlatformManage')"></el-button>
        </el-tooltip>
        <!-- 切换主题 -->
        <el-tooltip class="item" effect="dark" content="切换主题">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_qiehuanzhuti" circle @click="$Ctl.changeThemeMap()"></el-button>
        </el-tooltip>
        <!-- 水平距离 -->
        <el-tooltip class="item" effect="dark" content="水平距离">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_celiangjuli" circle @click="$Ctl.distanceMeasure()"></el-button>
        </el-tooltip>
        <!-- 量高 -->
        <el-tooltip class="item" effect="dark" content="量高">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_celianggaodu" circle @click="$Ctl.highMeasure()"></el-button>
        </el-tooltip>
        <!-- 清除 -->
        <el-tooltip class="item" effect="dark" content="清除标记">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_qingchucehuishuju" circle @click="$Ctl.clearMapMark()"></el-button>
        </el-tooltip>
        <!-- 场景熟悉 -->
        <!-- <el-tooltip class="item" effect="dark" content="场景熟悉">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_changjingshuxi" circle></el-button>
        </el-tooltip> -->
        <!-- 切换到百度 -->
        <el-tooltip v-show="bsConfig.MapOptions.baidMapAttr.show" class="item" effect="dark" content="切换到二维地图">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_qiehuandaobaiduditu" circle  @click="$Ctl.switchMapType(1)"></el-button>
        </el-tooltip>
        <!-- 路径规划 -->
        <el-tooltip class="item" effect="dark" content="路径规划">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_lujingguihua" circle @click="$Ctl.navigationLocation()"></el-button>
        </el-tooltip>
        <!-- 2D -->
        <el-tooltip class="item" effect="dark" content="2/3D视角切换">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_wei" circle @click="$Ctl.changeMode23D()"></el-button>
        </el-tooltip>
        <!-- 3D -->
        <!-- 
        <el-tooltip class="item" effect="dark" content="3D视角" @click="$Ctl.changeMode23D()">
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_wei1" circle></el-button>
        </el-tooltip>
        -->
        <!-- 查找周边 -->
        <el-tooltip class="item" effect="dark" content="查找周边" >
            <el-button type="primary" icon="iconfont fontSize30 icongongjuxiang_chazhaozhoubian" circle @click="$Ctl.lookAround()"></el-button>
        </el-tooltip>
    </div>
    <div class="switch-group-tools">
       <div class="switch-group-tools-one">
            <div class="switch-group-tools-left">调整间距</div>
            <div class="switch-group-tools-right">
                <el-button type="danger" icon="el-icon-plus fontSize30" circle @click="$Ctl.adjustSpacing(1)"></el-button>
                <el-button type="danger" icon="el-icon-minus fontSize30" circle @click="$Ctl.adjustSpacing(-1)"></el-button>
            </div>
       </div>
       <div class="switch-group-tools-one">
            <div class="switch-group-tools-left">显示图标</div>
            <div class="switch-group-tools-right">
                <el-switch class="setup_li_switch"  v-model="switchFlag_Icon" active-color="#0F4286" inactive-color="#3E475D" @change="changeSwitch_Icon"></el-switch>
            </div>
       </div>
       <div class="switch-group-tools-one">
            <div class="switch-group-tools-left">显示文字</div>
            <div class="switch-group-tools-right">
                <el-switch class="setup_li_switch"  v-model="switchFlag_Words" active-color="#0F4286" inactive-color="#3E475D" @change="changeSwitch_Words"></el-switch>
            </div>
       </div>
    </div>
  </div>
</template>
<script>

export default {
    props: {
        parames: {
            default () {
                return {}
            }
        }
    },
    data () {
        return {
            switchFlag_Icon:true,
            switchFlag_Words:true
        }
    },
    created () {
        let that = this
        //TODO 获取缓存的地图配置
    },
    methods: {
       changeSwitch_Icon(e){
           this.switchFlag_Icon = e
           this.$Ctl.hideMapMarks(e)
       },
       changeSwitch_Words(e){
           this.switchFlag_Words = e
           this.$Ctl.hideMapMarksText(e)
       }
    }
}
</script>

<style lang="scss" scoped>
.tools-fmap{
    height: 450px;
    padding: 10px;
    button{
        color: #89E2FF;
        width:58px;
        height:58px;
        margin: 11px;
        background:rgba(51,114,212,0.3);
        border:2px solid rgba(51,114,212,1);
        border-radius:8px;
        .selected{
            color: #90F1FF;
            background: rgba(144,241,255,0.3);
            border: 2px solid rgba(144,241,255,1)
        }
    }
    .switch-group-tools{
        padding-right: 10px;
        .switch-group-tools-one{
            width: 100%;
            height: 70px;
            line-height: 70px;
            .switch-group-tools-left{
                float: left;
                font-size:20px;
                text-indent: 10px;
                color:rgba(163,190,221,1);
            }
            .switch-group-tools-right{
                float: right;
                width: calc(100% - 100px);
                text-align: right;
                button{
                    zoom: 0.6;
                    border-radius: 100%;
                }
                .setup_li_switch{
                    margin-right: 5px;
                }
            }
        }
    }
}
</style>
